import React, { memo, useMemo } from 'react'
const MemoSon = memo(function Son(props) {
  console.log('Son render', props.message)
  return <div>son</div>
}
)
function ReactMemoApp() {
    const [count, setCount] = React.useState(0);
    const handleClick = () => {
      setCount(count + 1);
    }
    // const list = [1, 2, 3];
    // 由于是[]空依赖，下面的list只会在组件渲染完毕后执行一次，并被缓存
    const list = useMemo(() => [1, 2, 3], []);
  return (
    <div>
        <h1>hooks之React.Memo</h1>
        <button onClick={handleClick}>+{count}</button>
        {/* <MemoSon message={count}/> */}
        <MemoSon message={list}/>
    </div>
  )
}
export default ReactMemoApp